<template>
  <div class="sqing">
<!--         <div id="topt">-->
<!--      <div class="top">-->
<!--        <img src="../assets/img/sqimg/fanhui.png" alt="" @click="back">-->
<!--        <div class="title-img">主申请人信息</div>-->
<!--        <span>暂存</span>-->
<!--      </div>-->
           <NavBarTop pageTit="主申请人信息" :needPhoneTop="false" :needZanC="true"></NavBarTop>
<!--    </div>-->
<div id="banner">
<van-form>
  <van-field
    v-model="name"
    name="申请人"
    label="申请人姓名"
    required
    placeholder="请输入姓名" input-align="right"
  />
<!--    :rules="[{ required: true,}]"-->
  <!-- 民族 -->
  <van-field
  v-model="fieldValue"
  is-link
  readonly
    required
  label="民族"
  placeholder="请选择民族" input-align="right"
  @click="show = true"
/>
<van-popup v-model="show" round position="bottom">
  <van-cascader
    v-model="cascaderValue"
    title="请选择民族"
    :options="optionsmz"
    @close="show = false"
    @finish="onFinish"
  />
</van-popup>
<!-- 证件类别 -->

  <van-field
  v-model="fieldValuezj"
  is-link
  readonly
    required
  label="证件类别"
  placeholder="请选择证件类别" input-align="right"
  @click="showzj = true"
/>
<van-popup v-model="showzj" round position="bottom">
  <van-cascader
    v-model="cascaderValuezj"
    title="请选择证件类别"
    :options="optionszj"
    @close="showzj = false"
    @finish="onFinishzj"
  />
</van-popup>

<!-- 证件号码 -->
<van-field
    v-model="haoma"
    type="haoma"
    name="证件号码"
    label="证件号码"
    required
    placeholder="请输入证件号码" input-align="right"
  />
<!--    :rules="[{ required: true, }]"-->
  <div class="border1">

  </div>
  <!-- 详细户籍地 -->
  <van-field
    v-model="huji"
    type="huji"
    name="详细户籍地"
    required
    label="详细户籍地"
    placeholder="请输入详细地址" input-align="right"
  />
<!--    :rules="[{ required: true, }]"-->
  <!-- 详细现居地 -->
<van-field
    v-model="xianju"
    type="xianju"
    name="详细现居地"
    label="详细现居地"
    placeholder="请输入详细现住址" input-align="right"
  />
<!--    :rules="[{ required: true, }]"-->
  <!-- 分割线 -->

  <div class="border1">
  </div>
<!-- 联系电话 -->
  <van-field
    v-model="dianhua"
    type="dianhua"
    name="联系电话"
    label="联系电话"
    placeholder="请输入联系电话" input-align="right"
  />
<!--    :rules="[{ required: true, }]"-->
  <!-- 婚姻状况 -->
  <van-field
  v-model="fieldValuehk"
  is-link
  readonly
  label="婚姻状况"
  placeholder="请选择婚姻状况" input-align="right"
  @click="showhk = true"
/>
<van-popup v-model="showhk" round position="bottom">
  <van-cascader
    v-model="cascaderValuehk"
    title="请选择婚姻状况"
    :options="optionshk"
    @close="showhk = false"
    @finish="onFinishhk"
  />
</van-popup>
<!-- 教育程度 -->

  <van-field
  v-model="fieldValuejy"
  is-link
  readonly
  label="教育程度"
  placeholder="请选择文化程度" input-align="right"
  @click="showjy = true"
/>
<van-popup v-model="showjy" round position="bottom">
  <van-cascader
    v-model="cascaderValuejy"
    title="请选择文化程度"
    :options="optionsjy"
    @close="showjy = false"
    @finish="onFinishjy"
  />
</van-popup>
<!-- 就业情况 -->
  <van-field
  v-model="fieldValuejycd"
  is-link
  readonly
  label="就业情况"
  placeholder="请选择就业情况" input-align="right"
  @click="showjycd = true"
/>
<van-popup v-model="showjycd" round position="bottom">
  <van-cascader
    v-model="cascaderValuejycd"
    title="请选择就业情况"
    :options="optionsjycd"
    @close="showjycd = false"
    @finish="onFinishjycd"
  />
</van-popup>
<!-- 月收入（元） -->

  <van-field
  v-model="fieldValueyr"
  is-link
  readonly
  label="月收入（元）"
  placeholder="请选择月收入" input-align="right"
  @click="showyr = true"
/>
<van-popup v-model="showyr" round position="bottom">
  <van-cascader
    v-model="cascaderValueyr"
    title="请选择月收入"
    :options="optionsyr"
    @close="showyr = false"
    @finish="onFinishyr"
  />
</van-popup>
<!-- 所属群体 -->

  <van-field
  v-model="fieldValueqt"
  is-link
  readonly
  label="所属群体"
  placeholder="请选择所属群体" input-align="right"
  @click="showqt = true"
/>
<van-popup v-model="showqt" round position="bottom">
  <van-cascader
    v-model="cascaderValueqt"
    title="请选择所属群体"
    :options="optionsqt"
    @close="showqt = false"
    @finish="onFinishqt"
  />
</van-popup>

  <div  class="divbtn">
    <van-button round block type="info" @click="onsubmit" >下一步</van-button>
  </div>
</van-form>


</div>

  </div>
</template>

<script>
import { Button, Cell, CellGroup, Icon, Image as VanImage, NavBar,Form ,Field,Cascader ,Popup,Toast ,Picker  } from "vant";
import  NavBarTop from '@/components/navBar.vue'
export default {
    name: "sqing",
  components: {
    NavBarTop,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [VanImage.name]: VanImage,
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Cascader.name]: Cascader,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Picker.name]: Picker,
  },
  data() {
      return{
      name: '',
      minzu: '',
      leibie:'',
      haoma:'',
      huji:'',
      xianju:'',
      dianhua:'',
      funkuang:'',
      jiaoyu:'',
      jiuye:'',
      shouru:'',
      qunti:'',

    //
      show: false,
      showzj:false,
      fieldValue: '',
      cascaderValue: '',
      fieldValuezj: '',
      cascaderValuezj: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      optionsmz: [
        {
          text: '汉族',
          value: '330000',
        },
        {
          text: '其他',
          value: '320000',
        },
      ],
       optionszj: [
        {
          text: '身份证',
          value: '33000',
        },
        {
          text: '驾驶证',
          value: '32900',
        },
        {
          text: '护照',
          value: '32000',
        },
      ],
       showhk: false,
      showjy:false,
      fieldValuehk: '',
      cascaderValuehk: '',
      fieldValuejy: '',
      cascaderValuejy: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      optionshk: [
        {
          text: '未婚',
          value: '330000',
        },
        {
          text: '已婚',
          value: '320000',
        },
      ],
       optionsjy: [
        {
          text: '高中',
          value: '33000',
        },
        {
          text: '专科',
          value: '32900',
        },
        {
          text: '本科',
          value: '32000',
        },
         {
           text: '硕士',
           value: '32001',
         },
         {
           text: '博士',
           value: '32002',
         }
      ],
      showyr: false,
      showjycd: false,
      showqt:false,
      fieldValueyr: '',
      cascaderValueyr: '',
      fieldValuejycd: '',
      cascaderValuejycd: '',
      fieldValueqt: '',
      cascaderValueqt: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      optionsyr: [
        {
          text: '小于3000',
          value: '321100',
        },
        {
          text: '3000-8000',
          value: '330000',
        },
        {
          text: '8000-15000',
          value: '320000',
        },
        {
          text: '大于15000',
          value: '321000',
        },
      ],
      optionsjycd: [
        {
          text: '在职',
          value: '321100',
        },
        {
          text: '离职',
          value: '330000',
        }
      ],
       optionsqt: [
        {
          text: '外省农村',
          value: '33000',
        },
        {
          text: '外省城镇',
          value: '32900',
        },
        {
          text: '省内农村',
          value: '32000',
        },
        {
          text: '省内城镇',
          value: '32001',
        },
      ],
    //    columns: ['汉族', '苗族', '维吾尔族', '蒙古族', '白族', '傣族', '其他'],
    };
  },
methods:{
    onsubmit() {
      // if(!this.name||!this.haoma||!this.fieldValuezj||!this.fieldValue||!this.huji){
      //   this.$toast('请填写必填信息')
      //   return
      // }

    this.$router.push('/shenq3')
    },
     // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
    // 证件类型
     onFinishzj({ selectedOptions }) {
      this.showzj = false;
      this.fieldValuezj = selectedOptions.map((option) => option.text).join('/');
    },
    // 婚姻
    onFinishhk({ selectedOptions }) {
      this.showhk = false;
      this.fieldValuehk = selectedOptions.map((option) => option.text).join('/');
    },
    // 教育
    onFinishjy({ selectedOptions }) {
      this.showjy = false;
      this.fieldValuejy = selectedOptions.map((option) => option.text).join('/');
    },
    // 月收入
    onFinishyr({ selectedOptions }) {
      this.showyr = false;
      this.fieldValueyr = selectedOptions.map((option) => option.text).join('/');
    },
    // 群体
    onFinishqt({ selectedOptions }) {
      this.showqt = false;
      this.fieldValueqt = selectedOptions.map((option) => option.text).join('/');
    },
    // 就业
    onFinishjycd({ selectedOptions }) {
      this.showjycd = false;
      this.fieldValuejycd = selectedOptions.map((option) => option.text).join('/');
    },
    back(){
        this.$router.go(-1)
    },
    //   onConfirm(value, index) {
    //   Toast(`当前值：${value}, 当前索引：${index}`);
    // },
    // onChange(picker, value, index) {
    //   Toast(`当前值：${value}, 当前索引：${index}`);
    // },
    // onCancel() {
    //   this.show=false
    // },
}
}
</script>

<style scoped>
::v-deep .van-field__control--right{
  color: #666666;
}
.border1{
  border-top: .06rem solid #F2F3F5;
}
.divbtn{
  width: 3.45rem;
  margin: .2rem auto;
}
#topt{
  background: url('../assets/img/sqimg/xhg.png') no-repeat;

}
.top img{
  width: .08rem;
  height: .14rem;
padding-left: .02rem;
  /* float: left; */
}
.title-img{
  /* height: 25px; */
font-size: .17rem;
font-family: Source Han Sans SC;
font-weight: bold;
line-height: 0;
display: inline;
padding-left: 100px;
color: #2D2D2D;
opacity: 1;
}
.top span{
    font-size: .15rem;
    font-weight: bold;
color: #2D2D2D;
    margin-left: 1rem;
}
</style>
